<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Template</title>
<meta name="viewport"
  content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css"
  href="bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
  href="bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
  <header>
    <!-- 为了居中 -->
    <div class="container">
      <!-- pull-right本质是float:right
      text-right是让文本在元素内右对齐 -->
      <span class="pull-right"><small>Power by</small> <b>Smart</b>Blogs</span>
    </div>
  </header>
  <!-- 2222222222222222222222222222222 -->
  <nav>
    <!-- 导航分区标签 -->
    <div class="container">
      <!-- 居中 -->
      <h1>
        <b>popo酱的博客</b> <small>——po就是主子，我是po奴才</small>
      </h1>
      <!-- 添加导航条 -->
      <div>
        <ul class="nav navbar-nav">
          <li><a href="">首页</a></li>
          <li><a href="ListServlet">文章</a></li>
          <li><a href="ShowSendServlet">发布博客</a></li>
        </ul>
        <!-- 右侧导航条 -->
        <ul class="nav navbar-nav navbar-right">
          <li><p th:text="'用户:'+${name}" class="navbar-text">用户:admin</p></li>
          <li><a href="LogoutServlet">登出</a></li>
        </ul>

      </div>
    </div>
  </nav>
  <!-- 2222222222222222222222222222222 -->
  <!-- 333333333333333333333333333333 -->
  <!-- 主体区域 -->
  <section>
    <div class="container">
      <!-- 划分3:1区域 -->
      <div class="row">
        <div class="col-md-9">
          <h2 class="page-header">
            <span class="fa fa-star-o"> 精选置顶</span>
          </h2>
          <!-- 第一篇文章开始 -->
          <div class="jumbotron">
            <div class="container">
              <!-- 添加1:1布局 -->
              <div class="row">
                <div class="col-md-6">
                  <!-- 设置响应式图片和圆角 -->
                  <img class="img-responsive img-rounded"
                  th:src="'images/'+${first.imgName}"
                    src="images/img1.jpg">
                </div>
                <div class="col-md-6">
                  <h3 class="row1">
                    <a th:href="'DetailServlet?oId='+${first.oId}" th:text=${first.title}>老的:《我不是药神》观后的反思</a>
                  </h3>
                  <p th:text=${first.abs} class="row4">《我不是药神》是由文牧野执导，宁浩、徐峥共同监制的剧情片，徐峥、
                    周一围、王传君、谭卓、章宇、杨新鸣等主演 。该片于2018年7月5日在中国上映。
                    影片讲述了神油店老板程勇从一个交不起房租的男性保健品商贩，一跃成为印度仿制药“格列宁”独家代理商的故事。
                  </p>
                  <p th:text="'作者::'+${first.userName}">作者:admin</p>
                  <!-- 添加span目的是为了标签之间有空格 -->
                  <span th:each="tag:${first.tags}">
                  	<a th:text=${tag.title} class="btn btn-info btn-xs">演员 </a>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 第一篇文章结束 -->

          <!-- 第2-4篇文章开始 -->

          <!-- 添加一行 分三等份
            //每一个div里面添加缩略图组件 -->
          <div class="row">
            <div th:each="a : ${second}" class="col-md-4">
            <!-- 缩略图组件 -->
              <div class="thumbnail">
                <img class="img-responsive img-rounded"
                th:src="'images/'+${a.imgName}"
                src="images/img20.jpg">
                <div class="caption">
                  <h3 class="row1"><a th:href="'DetailServlet?oId='+${a.oId}" th:text=${a.title}>人民空军，生日快乐！生日快乐！</a></h3>
                  <p th:text="'作者::'+${a.userName}">作者:admin</p>
                  <p>
                  	<span th:each="tag : ${a.tags}">
                    	<a th:text=${tag.title} class="btn btn-info btn-xs">新闻</a> 
              		</span>
                  </p>
                </div>
              </div>
            </div>
            <div th:remove="all" class="col-md-4">
               <!-- 缩略图组件 -->
              <div class="thumbnail">
                <img class="img-responsive img-rounded"
                src="images/img21.jpg">
                <div class="caption">
                  <h3 class="row1"><a>法国隆重纪念一战结束百年！</a></h3>
                  <p>作者:admin</p>
                  <p>
                    <a class="btn btn-info btn-xs">新闻</a> 
                  </p>
                </div>
              </div>
            </div>
            <div th:remove="all" class="col-md-4">
               <!-- 缩略图组件 -->
              <div class="thumbnail">
                <img class="img-responsive img-rounded"
                src="images/img22.jpg">
                <div class="caption">
                  <h3 class="row1"><a>蒙娜丽莎的微笑</a></h3>
                  <p>作者:admin</p>
                  <p>
                    <a class="btn btn-info btn-xs">美人</a> 
                  </p>
                </div>
              </div>
            </div>
          </div>


          <!-- 第2-4篇文章结束 -->
          <!-- 第5-8篇文章开始 -->
          <div th:each="a : ${third}" class="panel panel-default">
            <div class="panel-body">
              <!-- 添加一行 2:1的比例 -->
              <div class="row">
                <div class="col-md-8">
                  <h3 class="row1"><a th:href="'DetailServlet?oId='+${a.oId}" th:text=${a.title}>给大家推荐几款不错的耳机</a></h3>
                  <p th:text=${a.abs} class="row4">耳机其实是我们生活中经常使用的设备，如果你觉得太便宜的耳机质量差，太贵的又觉得没必要的话，那就可以看看我推荐给大家的这些了。 价格没有特别贵，希望能帮助你</p>
                </div>
                <div class="col-md-4">
                  <img class="img-responsive img-rounded"
                  th:src="'images/'+${a.imgName}"
                  src="images/img24.jpg">
                </div>
              </div>
            </div>
            <!-- 面板底部 -->
            <div class="panel-footer">
              <!-- 添加一行 3:2:2:3:2 -->
              <div class="row">
                <div class="col-md-3">
                  <span th:text=${a.createdStr} class="fa fa-calendar"
                  > 2018-10-19 11:50</span>
                </div>
                <div class="col-md-2">
                  <span th:text=${a.viewCount} class="fa fa-eye"
                  > 3</span>
                </div>
                <div class="col-md-2">
                  <span th:text=${a.commentCount} class="fa fa-comment-o"
                  > 0</span>
                </div>
                <div class="col-md-3"> 
                	<span th:each="tag : ${a.tags}">
                    	<a th:text=${tag.title} class="btn btn-info btn-xs">新闻</a> 
              		</span>
                </div>
                <div th:text="'作者::'+${a.userName}" class="col-md-2">作者:admin</div>
              </div>
            </div>
          </div>
          <!-- 第6篇开始 -->
          <div th:remove="all" class="panel panel-default">
            <div class="panel-body">
              <!-- 添加一行 2:1的比例 -->
              <div class="row">
                <div class="col-md-8">
                  <h3 class="row1"><a>《炉石传说》卡牌游戏系统介绍</a></h3>
                  <p class="row4">2014年3月13日全球同步正式运营。2014年获TGA2014游戏大奖最佳移动掌机游戏， [2] 2015年获第二届SXSW游戏大奖年度移动游戏。</p>
                </div>
                <div class="col-md-4">
                  <img class="img-responsive img-rounded"
                  src="images/img28.jpg">
                </div>
              </div>
            </div>
            <!-- 面板底部 -->
            <div class="panel-footer">
              <!-- 添加一行 3:2:2:3:2 -->
              <div class="row">
                <div class="col-md-3">
                  <span class="fa fa-calendar"
                  > 2018-10-19 11:39</span>
                </div>
                <div class="col-md-2">
                  <span class="fa fa-eye"
                  > 1</span>
                </div>
                <div class="col-md-2">
                  <span class="fa fa-comment-o"
                  > 0</span>
                </div>
                <div class="col-md-3">
                  <a class="btn btn-info btn-xs">手机</a> 
                  <a class="btn btn-info btn-xs">游戏</a> 
                </div>
                <div class="col-md-2">作者:admin</div>
              </div>
            </div>
          </div>
          <!-- 第6篇结束 -->
          <!-- 第7篇开始 -->
            <div th:remove="all" class="panel panel-default">
            <div class="panel-body">
              <!-- 添加一行 2:1的比例 -->
              <div class="row">
                <div class="col-md-8">
                  <h3 class="row1"><a>java好学不好学</a></h3>
                  <p class="row4">如果你有计算机基础知识，有面向对象的概念，那么我只能说真的好学，而且各种资料漫天飞舞~ 如果你以前就不知道编程是个啥，那我建议你还是看点基础入门的吧，比如C..... 数据结构、算法啥的，用到在学也不晚，但是你得稍微知道点</p>
                </div>
                <div class="col-md-4">
                  <img class="img-responsive img-rounded"
                  src="images/img6.jpg">
                </div>
              </div>
            </div>
            <!-- 面板底部 -->
            <div class="panel-footer">
              <!-- 添加一行 3:2:2:3:2 -->
              <div class="row">
                <div class="col-md-3">
                  <span class="fa fa-calendar"
                  > 2018-10-17 14:40</span>
                </div>
                <div class="col-md-2">
                  <span class="fa fa-eye"
                  > 21</span>
                </div>
                <div class="col-md-2">
                  <span class="fa fa-comment-o"
                  > 0</span>
                </div>
                <div class="col-md-3">
                  <a class="btn btn-info btn-xs">Java</a> 
                </div>
                <div class="col-md-2">作者:admin</div>
              </div>
            </div>
          </div>
          <!-- 第7篇结束 -->
          <!-- 第8篇开始 -->
          <div th:remove="all" class="panel panel-default">
            <div class="panel-body">
              <!-- 添加一行 2:1的比例 -->
              <div class="row">
                <div class="col-md-8">
                  <h3 class="row1"><a>王者荣耀好玩么</a></h3>
                  <p class="row4">王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类手机游戏，于2015年11月26日在Android、IOS平台上正式公测，游戏前期使用名称有《英雄战迹》、《王者联盟》。《Arena Of Valor》，即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。</p>
                </div>
                <div class="col-md-4">
                  <img class="img-responsive img-rounded"
                  src="images/img27.jpg">
                </div>
              </div>
            </div>
            <!-- 面板底部 -->
            <div class="panel-footer">
              <!-- 添加一行 3:2:2:3:2 -->
              <div class="row">
                <div class="col-md-3">
                  <span class="fa fa-calendar"
                  > 2018-11-23 11:19</span>
                </div>
                <div class="col-md-2">
                  <span class="fa fa-eye"
                  > 0</span>
                </div>
                <div class="col-md-2">
                  <span class="fa fa-comment-o"
                  > 0</span>
                </div>
                <div class="col-md-3">
                  <a class="btn btn-info btn-xs">游戏</a> 
                </div>
                <div class="col-md-2">作者:admin</div>
              </div>
            </div>
          </div>
          <!-- 第8篇结束 -->
          
          <!-- 第5-8篇文章结束 -->

        </div>
        <div class="col-md-3">
          <h2 class="page-header">
            <span class="fa fa-thumbs-o-up"> 推荐阅读</span>
          </h2>
          <!-- 文章搜索开始 -->
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-search">
                                文章搜索</span>
              </h3>
            </li>
            <li class="list-group-item">
              <!-- form表单 -->
              <form action="SearchServlet" class="form-inline">
                <div class="form-group">
                  <input id="search_input" name="title" type="text" class="form-control"
                   placeholder="请输入文章标题">
                </div>
                <button type="submit" 
                class="btn btn-default">
                <span class="fa fa-search"></span></button>
              </form>
            </li>
          </ul>
          <!-- 文章搜索结束 -->
          <!-- 最新内容开始 -->
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-calendar">
                            最新内容</span>
              </h3>
            </li>
            <li th:each="a : ${newList}" class="list-group-item">
             <a th:href="'DetailServlet?oId='+${a.oId}" th:text=${a.title} class="row1">《炉石传说》卡牌游戏系统介绍卡牌游戏系统介绍</a>
            </li>
          
          </ul>
          <!-- 最新内容结束 -->
            <!-- 评论最热开始 -->
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-comment-o">
                            评论最热</span>
              </h3>
            </li>
            <li th:each="a : ${commentList}" class="list-group-item">
             <a th:href="'DetailServlet?oId='+${a.oId}" th:text=${a.title} class="row1">我要支持markDown</a>
            </li>
           
          </ul>
          <!-- 评论最热结束 -->
            <!-- 浏览最多开始 -->
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-eye">
                             浏览最多</span>
              </h3>
            </li>
            <li th:each="a : ${viewList}" class="list-group-item">
             <a th:href="'DetailServlet?oId='+${a.oId}" th:text=${a.title} class="row1">mate20 pro真不错了</a>
            </li>
           
          </ul>
          <!--  浏览最多结束 -->
          
           <!-- 分类标签开始 -->
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-tag">
                              分类标签</span>
              </h3>
            </li>
            <li th:each="tag : ${tags}" class="list-group-item">
             <a th:href="'TagServlet?id='+${tag.oId}" th:text="${tag.title}+'('+${tag.referenceCount}+')'" class="row1">八卦(6)</a>
            </li>
         
          </ul>
          <!-- 分类标签结束 -->
           <!-- 友情链接开始 -->
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-link">
                              友情链接</span>
              </h3>
            </li>
            <li th:each="link : ${links}" class="list-group-item">
             <a th:text=${link.title} th:href=${link.address} class="row1">网易</a>
            </li>
           
          </ul>
          <!-- 友情链接结束 -->
          
        </div>
      </div>
    </div>
  </section>


  <!-- 333333333333333333333333333333 -->


  <footer class="well">
    <div class="container">
      <!-- 居中 -->
      <b>Copyright © 2018 Tedu.cn All Rights Reserved
        京ICP备08000853号-56 <a href="http://www.tmooc.cn">达内时代科技集团有限公司</a>
        版权所有
      </b> <span class="pull-right"><b>Version</b> 0.1.0</span>
    </div>
  </footer>
</body>
<script type="text/javascript" src="bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript"
  src="bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="bootstrap3/js/respond.min.js"></script>
</html>